<template>
	<div class="partnerList">
		<div class="partnerList_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">小程序直播<i class="el-icon-close"></i></div>
		</div>
		<div class="partnerList_bottom">
			<div class="partnerList_new">
				<div class="item">
					<span>直播类型</span>
					<el-select v-model="live_type" clearable @change="selectType" placeholder="请选择">
						<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>
				<div class="item">
					<span>直播状态</span>
					<el-select v-model="live_status" clearable @change="selectStatus" placeholder="请选择">
						<el-option v-for="item in liveStatus" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>
				<div class="item">
					<span>时间查询</span>
					<el-date-picker v-model="valueTime" type="daterange" :picker-options="pickerOptions"
						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd"
						@change="selectTime">
					</el-date-picker>
				</div>
				<div class="item">
					<span>是否推荐</span>
					<el-select v-model="is_push" clearable @change="selectPush" placeholder="请选择">
						<el-option v-for="item in pushStatus" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>
				<div class="item keywords">
					<el-input v-model="keyword" placeholder="直播房间"></el-input>
					<button class="searchBtn" @click="handerSeach"><i class="el-icon-search"></i>搜索</button>
				</div>
			</div>
		</div>
		<div class="partnerList_table">
			<div class="partnerList_bottom_table">
				<table>
					<tr>
						<th></th>
						<th>序号</th>
						<th>标题</th>
						<th>直播房间</th>
						<th>封面图</th>
						<th>直播状态</th>
						<th>直播开始时间</th>
						<th>直播结束时间</th>
						<th>创建时间</th>
						<th>操作</th>
					</tr>
					<tr v-for="(v,i) in listData" :key="i">
						<td>
							<font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}"
								@click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
						</td>
						<td>{{v.id}}</td>
						<td>{{v.name}}</td>
						<!-- <td>{{v.status==0?'隐藏':v.status==1?'显示':''}}</td> -->
						<td>
							{{v.roomid}}
						</td>
						<td>
							<div style="width: 60px;height: 60px;overflow: hidden;" @click="LookImage(v)">
								<img :src="v.cover_img" style="width: 100%;height: 100%;" referrerPolicy="no-referrer">
							</div>
						</td>
						<td>
							<el-tag v-if="v.live_status == 101">直播中</el-tag>
							<el-tag v-if="v.live_status == 102" type="success">未开始</el-tag>
							<el-tag v-if="v.live_status == 103" type="info">已结束</el-tag>
							<el-tag v-if="v.live_status == 104" type="warning">禁播</el-tag>
							<el-tag v-if="v.live_status == 105" type="danger">暂停</el-tag>
							<el-tag v-if="v.live_status == 107" type="danger">已过期</el-tag>
						</td>
						<td>
							{{formatDate(v.start_time)}}
						</td>
						<td>
							{{formatDate(v.end_time)}}
						</td>
						<td>
							{{v.created_at}}
						</td>
						<td>
							<button class="editor primary" @click="recommend(v.id)" v-if="v.is_push==0">推荐</button>
							<button class="editor primary" v-if="v.is_push==1" disabled>已推荐</button>
							<button class="editor shelves" @click="toChangeStatus(v.roomid)">编辑</button>
							<button class="editor" @click="upPrizeUser(v.roomid)">上传名单</button>
							<button class="editor" @click="pagePrize(v.roomid)">中奖名单</button>
						</td>
					</tr>
					<tr v-if="listData.length == 0">
						<td class="table_title" colspan="10">当前数据空空如也</td>
					</tr>
				</table>
				<div class="partnerList_bottom_page">
					<div class="partnerList_bottom_page_left">
						<div class="partnerList_bottom_page_left_checkAll" @click="handerCheckAll">
							<font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i>
							</font>
						</div>全选
						<!-- <button class="partnerList_bottom_page_left_btn" @click="selectDel">删除</button> -->
					</div>
					<div class="partnerList_bottom_page_right">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper" :total="total" background>
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
		<modal :title="MadalTitle" v-model="visible" :centered="true" :maskClosable="false" @ok="handleOk"
			@cancel="handleCancel">
			<div>
				<el-form ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="邀请用户数量" prop="name">
						<el-input type="text" value="" v-model="invit_num" placeholder="邀请用户数量" />
					</el-form-item>
					<el-form-item label="奖励金额" prop="name">
						<el-input type="text" v-model="rewardMoney" placeholder="奖励金额" />
					</el-form-item>
					<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
					<span>直播间抽奖中奖发放红包金额</span>
					<el-form-item label="红包金额" prop="name" style="margin-top:24px;">
						<el-input type="text" v-model="red_amount" placeholder="直播间中奖发放红包金额" />
					</el-form-item>

				</el-form>
			</div>
		</modal>
		<!-- 上传中奖名单 -->
		<modal :title="MadalTitle" v-model="prizeVisible" :centered="true" :maskClosable="false" @ok="prizeListUpload"
			@cancel="handleCancel">
			<div>
				<input type="file" class="upload" @change="addImg" ref="inputer" multiple accept=".csv,.xls,.xlsx" />
			</div>
		</modal>
	</div>
	</div>
</template>

<script>
	import modal from 'ant-design-vue/lib/modal';
	import 'ant-design-vue/lib/table/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
	import 'ant-design-vue/lib/modal/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
	export default {
		components: {
			modal
		},
		data() {
			return {
				listData: [],
				cate: {},
				keyword: '',
				checkAll: false,
				page: 1,
				pageSize: 10,
				total: 0,
				checkBoxAll: [], // 选中的数据
				shelvesAlls: [],
				tableList: [],
				dialogVisible: false,
				rewardMoney: '', //奖励金额,
				invit_num: '', //邀请用户数
				visible: false,
				prizeVisible: false,
				roomid: '', //直播房间id
				red_amount: '', //红包金额
				formData: new FormData(),
				ruleForm: [],
				valueTime: [],
				//直播类型
				typeList: [{
						label: '推流',
						value: '1'
					},
					{
						label: '手机直播',
						value: '0'
					}
				],
				//直播状态
				liveStatus: [{
						label: '直播中',
						value: '101'
					},
					{
						label: '未开始',
						value: '102'
					},
					{
						label: '已结束',
						value: '103'
					},
					{
						label: '暂停',
						value: '105'
					},
					{
						label: '已过期',
						value: '107'
					}
				],
				pushStatus: [{
						label: '未推荐',
						value: 0
					},
					{
						label: '已推荐',
						value: 1
					},
				],
				is_push:0,//1推荐
				start_time: [],
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now() - 8.64e6;
					},
				},
			}
		},
		mounted() {
			this.getEstateList()
		},

		methods: {
			// 获取直播分类列表
			getEstateList() {
				let params = {
					keyword: this.keyword,
					live_status: this.live_status,
					live_type: this.live_type,
					start_time: this.start_time,
					page: this.page,
					pagesize: this.pageSize,
					is_push:this.is_push,
				}
				let that = this;
				that.$http.post('/api/root/wx/live/player/lists', params).then(res => {
					if (res.code === 1) {
						var data = res.data.wxLivePlayers
						if (data.length > 0) {

							that.total = res.data.count
							that.listData = data
						} else {
							that.total = 0
							that.listData = []
						}
					} else {
						that.$message.error(res.msg)
					}
				}).catch(err => {
					that.$message.error(err.msg ? err.msg : err.toString())
				})
			},
			// 文件上传
			onChange(file, fileList) {
				this.fileList = fileList
			},
			//推荐
			recommend(id) {
				let that = this;
				let params = {
					id: id,
				}
				that.$confirm('确定推荐', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.$http.post('/api/root/wx/live/player/changeispush', params).then(res => {
						if (res.code === 1) {
							that.$message.success("推荐成功")
						} else {
							that.$message.error(res.msg)
						}
					})
				}).catch(() => {});
			},
			// 更改状态
			toChangeStatus(id) {
				//获取配置信息
				this.getEditDetail(id);
				this.MadalTitle = "编辑直播"
				this.visible = true
				this.roomid = id
			},
			handleCancel() {
				this.MadalTitle = ''
				this.roomid = null
				this.visible = false
			},
			// 搜索
			handerSeach() {
				this.getEstateList()
			},

			// 详情按钮
			toEdit(id) {
				this.$router.push({
					name: 'estateAdd',
					query: {
						id
					}
				})
			},
			formatDate(value) {
				let date = new Date(parseInt(value) * 1000);
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				m = m < 10 ? "0" + m : m;
				let d = date.getDate();
				d = d < 10 ? "0" + d : d;
				let h = date.getHours();
				h = h < 10 ? "0" + h : h;
				let minute = date.getMinutes();
				let second = date.getSeconds();
				minute = minute < 10 ? "0" + minute : minute;
				second = second < 10 ? "0" + second : second;
				return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
			},
			// 多选
			handlerCheckbox(i) {
				console.log(i);
				let arr = this.checkBoxAll;
				if (arr.includes(i)) {
					let index = arr.indexOf(i);
					if (index != -1) {
						arr.splice(index, 1);
						this.shelvesAlls.splice(index, 1);
						if (this.checkBoxAll.length !== this.tableList.length) {
							this.checkAll = false;
						}
					}
				} else {
					this.checkBoxAll.push(i);
					this.shelvesAlls.push(this.tableList[i].id);
					if (this.checkBoxAll.length == this.tableList.length) {
						this.checkAll = true;
					}
				};
				console.log(this.shelvesAlls);
			},
			// 全选与全不选
			handerCheckAll() {
				this.checkAll = !this.checkAll;
				let arr = this.tableList.length;
				this.checkBoxAll = [];
				this.shelvesAlls = [];
				if (this.checkAll) {
					for (let i = 0; i < arr; i++) {
						this.checkBoxAll.push(i);
					}
					this.checkBoxAll.map(v => {
						this.shelvesAlls.push(this.tableList[v].id.toString());;
					})
				} else {
					this.checkBoxAll = [];
					this.shelvesAlls = []
				}
				console.log(this.shelvesAlls);
			},
			handleOk() {
				let params = {
					red_amount: this.red_amount, //红包金额
					invit_reward: this.rewardMoney, //奖励金额
					invit_num: this.invit_num //邀请人数
				}
				let paramsArr = JSON.stringify(params);
				this.$http.post('/api/root/wx/live/player/config/save', {
					roomid: this.roomid,
					room_config: paramsArr
				}).then(res => {
					if (res.code == 1) {
						this.$message.success('操作成功')
						this.handleCancel();
					} else {
						this.$message.warning(res.msg)
					}
				})
			},
			//上传中奖人员名单
			prizeListUpload() {
				this.$http.post('/api/root/wx/live/luck/user/upload', this.formData, {
					headers: {
						'Content-Type': 'multipart/form-data'
					}
				}).then(res => {
					if (res.code == 1) {
						this.$message.success('操作成功')
						this.$refs.inputer.value = ''
						this.handleCancel();
					} else {
						this.$message.warning(res.msg)
					}
				}).catch(err => {
					this.$message.warning('请求异常')
				})
			},
			addImg(event) {
				let inputDOM = this.$refs.inputer;
				this.formData.append('luck_file', inputDOM.files[0])
				this.formData.append('roomid', this.roomid);
			},
			getEditDetail(id) {
				this.$http.post('/api/root/wx/live/player/config/detail', {
					roomid: id
				}).then(res => {
					if (res.data.room_config) {
						let room_config = res.data.room_config
						this.red_amount = room_config.red_amount
						this.rewardMoney = room_config.invit_reward
						this.invit_num = room_config.invit_num
					} else {
						this.red_amount = null
						this.rewardMoney = null
						this.invit_num = null
						//this.$message.warning(res.msg)
					}
				})
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getEstateList()
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getEstateList()
			},
			//上传中奖名单
			upPrizeUser(id) {
				this.MadalTitle = "上传中奖名单"
				this.prizeVisible = true
				this.roomid = id
			},
			pagePrize(room_id) {
				this.$router.push({
					name: "liveLuckList",
					query: {
						room_id
					}
				});
			},
			// 选择直播类型类型
			selectType() {
				this.page = 1
				this.getEstateList()
			},

			// 选择状态
			selectStatus() {
				this.page = 1
				this.getEstateList()
			},
			selectPush(){
				this.page = 1
				this.getEstateList()
			},
			// 选择时间
			selectTime() {
				let start_time = this.valueTime ?
					this.$moment(this.valueTime[0]).format("yyyy-MM-DD 00:00:00") :
					"";
				let end_time = this.valueTime ?
					this.$moment(this.valueTime[1]).format("yyyy-MM-DD 23:59:59") :
					"";
				let array = [];
				array.push(start_time, end_time)
				this.start_time = array
				this.getEstateList();
			},
		}
	}
</script>

<style lang="less" scoped>
	@import 'liveCate/index.less';


	.partnerList_new {
		width: 96%;
		display: flex;
		align-items: center;
		margin: 20px auto;
        flex-wrap: wrap;
		.item {
			margin:20px 28px 0 0;

			span {
				margin-right: 5px;
			}
		}

		.keywords {
			display: flex;
			align-items: center;

			.searchBtn {
				max-width: 90px;
				min-width: 68px;
				height: 42px;
				line-height: 42px;
				background-color: #409EFF;
				margin-left: 5px;
				border: 0 none;
				outline: none;
				border-radius: 4px;
				color: #fff;
				cursor: pointer;
			}
		}
	}

	.partnerList .partnerList_bottom_table table td button {
		width: auto !important;
		padding: 0 5px 0 5px;
	}
</style>
